// 导入react和react-dom
import React from 'react'
import  ReactDOM from 'react-dom'
import './index.css'
// // 创建元素
// const h1=React.createElement('h1',null,'Hello React')
// ReactDOM.render(h1,document.getElementById('root'))

// // 练习
// // 1:创建一个p标签,包含"月薪过万(美元)"文本
// // const p=React.createElement('p',null,'月薪过三万')
// // ReactDOM.render(p,document.getElementById('root'))

// // 2:给p标签添加一个id=123的属性
// const p=React.createElement('p',{id:123},'添加属性练习')
// ReactDOM.render(p,document.getElementById('root'))
// // 3:给p标签添加一个class选择器,并将字体颜色设置为red



// // JSX----------
// // JSX写法
// const h2=<h2> Hello React</h2>

// // 2:渲染react 元素
// ReactDOM.render(h2,document.getElementById('root'))



// // JSX访问数据类型
// // 1:String
// const boy='Jack'
// // 2:Number
// const age=18
// // 3:Array
// const hobbies=['吃饭','学习','睡觉']
// // 4:Object
// const obj={name:'Rose',age:10}
// // 5:三元
// // 6:function
// const fun=()=>{
//   return( <div> 我是函数返回的内容</div>)
// }
// // 7:JSX表达式
// const jsx=(
//   <div> 我是JSX表达式</div>
// )
// // 三:=====>创建react元素

// const tag= (
//   <div>
//     <h1 className={'title'}> JSX结构中访问各种数据类型</h1>
//     <li style={ {color:'orange'}}>
//       Hello {boy},我今年{age}岁
//       </li>

//    <li style={{color:'red'}}>{hobbies.join(',')}</li>
//    <li>{obj.name}年龄:{obj.age} </li>

//    <li> 三元表达式 {1>0 ? '是的':'不是'}</li>

//    <li> {fun()}</li>
//    <li> {jsx}</li>
//   </div>
// )
// ReactDOM.render(tag,document.getElementById('root'))

// // 4:====================================>条件渲染
// // 条件:==>条件语句或者变量的布尔值
// // 渲染:==>渲染dom
// // 具体可以配合 三元 ,函数,逻辑运算符 来实现条件渲染

// // 1:=====>通过if else 实现
// // 条件
// const isLoading=true
// const isGet=false

// // 渲染ui
// const loadingUI=<h4>数据渲染</h4>
// const getDataUI=<h4>数据请求成功</h4>
// // 函数
// const loadData=()=>{
//   // 条件语句
//   if(isLoading){
//     return loadingUI
//   }else if(isGet){
//     return 
//   }else{
//     return getDataUI
//   }
// }

// const renderCondition=<div>{loadData()}</div>

// ReactDOM.render(renderCondition,document.getElementById('root'))

// // 方式二:逻辑运算符实现条件渲染
// // 条件
// const s1=true


// // 渲染
// const uiOne=<div>我是s1</div>
// const uiTwo=<div>我是S2</div>

// const Logic=<div>{s1 ? uiOne :uiTwo}</div>

// ReactDOM.render(Logic,document.getElementById('root'))


// // 列表渲染=============================
// const book=['红楼梦','三国演义','水浒传','西游记']
// // 如果这里不添加key会提示错误
// const book1=book.map((bookName,index) => <li className={'title'} key={index}>{bookName}</li>)

// const ul=<ul>{book1}</ul>

// // 渲染到根标签
// ReactDOM.render(ul,document.getElementById('root'))



// ================================B站列表渲染
import List from './components/07-B站评论区'
ReactDOM.render(<List></List>,document.getElementById('root'))
